<script setup>
import { onMounted, ref } from 'vue'
import MapboxDraw from '@mapbox/mapbox-gl-draw'
// import maplibregl from 'maplibre-gl'
// import maplibregl from '@/maplibre-gl/maplibre-gl.js'
import 'maplibre-gl/dist/maplibre-gl.css'
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

let map = ref()
let Draw = ref()

const drawType = {
  poi: 'draw_point',
  line: 'draw_line_string',
  fill: 'draw_polygon'
}
const changeDraw = (type) => {
  Draw.value.changeMode(type)
}

onMounted(() => {
  map.value = new maplibregl.Map({
    container: 'map', // container id
    style: {
      'id': '43f36e14-e3f5-43c1-84c0-50a9c80dc5c7',
      'name': 'MapLibre',
      'zoom': 9,
      'center': [
        117.046,
        36.057
      ],
      'glyphs': 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
      'layers': [
        {
          'id': 'background',
          'type': 'background',
          'paint': {
            'background-color': '#D8F2FF'
          },
          'filter': [
            'all'
          ],
          'layout': {
            'visibility': 'visible'
          },
          'maxzoom': 24
        },
        {
          'id': 'sdraster',
          'type': 'raster',
          'source': 'sdraster',
          'layout': {
            'visibility': 'visible'
          }
        },
        {
          'id': 'sdrasterpubmapdj',
          'type': 'raster',
          'source': 'sdrasterpubmapdj',
          'layout': {
            'visibility': 'visible'
          }
        },
          {
              'id': 'ludeng',
              'type': 'circle',
              'metadata': {
                  'jinan:group': '默认图层组',
                  'name': '默认图层'
              },
              'source': 'ludeng',
              'paint': {
                  'circle-blur': 0,
                  'circle-color': '#01b0ff',
                  'circle-opacity': 1,
                  'circle-radius': 5,
                  'circle-stroke-color': 'rgb(255, 255, 255)',
                  'circle-stroke-opacity': 0.8,
                  'circle-stroke-width': 1.6,
              },
              'layout': {
                  'visibility': 'visible'
              },
          },
        {
          'id': 'Blue',
          'type': 'raster',
          'source': 'Blue',
          'layout': {
            'visibility': 'none'
          }
        },
        {
          'id': 'raster',
          'type': 'raster',
          'source': 'raster',
          'layout': {
            'visibility': 'none'
          }
        },
        {
          'id': 'huise',
          'type': 'raster',
          'source': 'huise',
          'layout': {
            'visibility': 'none'
          }
        },
        {
          'id': 'bailan',
          'type': 'raster',
          'source': 'bailan',
          'layout': {
            'visibility': 'none'
          }
        }
      ],
      'sources': {
        'ludeng': {
          'type': 'geojson',
            'data': './data/ludeng.json'
        },
        'sdraster': {
          'type': 'raster',
            tiles: [
                `https://service{domainx}.sdmap.gov.cn/tileservice/sdrasterpubmap?tk=8fe697199e1db397ec7154d9b9cea6bc&layer=SDRasterPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}`,
            ],
            bounds: [114.229839088925, 33.9389305555556, 123.400530149205, 38.9048194444444],
            scheme: 'xyz',
            tileSize: 256,
        },
        'sdrasterpubmapdj': {
          'type': 'raster',
            tiles: [
                `https://service{domainx}.sdmap.gov.cn/tileservice/sdrasterpubmapdj?tk=8fe697199e1db397ec7154d9b9cea6bc&layer=SDRasterPubMapDJ&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}`,
            ],
            bounds: [114.229839088925, 33.9389305555556, 123.400530149205, 38.9048194444444],
            scheme: 'xyz',
            tileSize: 256,
        },
        'Blue': {
          'type': 'raster',
          'tiles': [
            // "https://sat04.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}"
            // "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
            // "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}"
            // "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}"
            "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}"
            // "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
            // "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
            // 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}"
            // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
          ],
          'minZoom': 0,
          'maxZoom': 18,
          scheme: 'xyz',
          tileSize: 256
        },
        'raster': {
          'type': 'raster',
          'tiles': [
            'https://sat04.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}',
            'https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
          ],
          'minZoom': 0,
          'maxZoom': 18,
          scheme: 'xyz',
          tileSize: 256
        },
        'huise': {
          'type': 'raster',
          'tiles': [
            'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}'
          ],
          'minZoom': 0,
          'maxZoom': 18,
          scheme: 'xyz',
          tileSize: 256
        },
        'bailan': {
          'type': 'raster',
          'tiles': [
            'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
          ],
          'minZoom': 0,
          'maxZoom': 18,
          scheme: 'xyz',
          tileSize: 256
        }
      },
      'version': 8
    }, // style URL
    center: [117.046, 36.057], // starting position [lng, lat]
    zoom: 9 // starting zoom
  })
    map.value.on('load', () => {
        map.value.on('click', 'ludeng', (e) => {
            // Copy coordinates array.
            const coordinates = e.features[0].geometry.coordinates.slice();
            const description = e.features[0].properties.description;

            new maplibregl.Popup()
                .setLngLat(coordinates)
                .setHTML(`
                <div class="card bg-base-100 w-56">
  <figure>
    <img style="height: 200px;width: 100%;"
      src="https://tse1-mm.cn.bing.net/th/id/OIP-C.P9CJnnqZi1dQl7vwhl-DZgHaNK?w=183&h=326&c=7&r=0&o=5&dpr=1.6&pid=1.7"
      alt="Shoes" />
  </figure>
  <div class="card-body p-3">
    <h2 class="card-title">路灯001</h2>
                <p class='text-base'>道路名称：经十路</p>
                <p class='text-base'>路灯状态：关闭</p>
                <p class='text-base'>路灯高度：17m</p>

  </div>
  </div>

                `)
                .addTo(map.value);
        });
    })
  // Draw.value = new MapboxDraw({
  //   displayControlsDefault: false
  // })
  // map.value.on('load', function() {
  //   map.value.addControl(Draw.value)
  // })
})
</script>

<template>
  <div id='map' class='w-full h-[calc(100%-4.3rem)]'>
    <div class='join join-vertical lg:join-horizontal absolute z-10'>
<!--      <button class='btn join-item' @click="changeDraw(drawType.poi)">添加点</button>-->
<!--      <button class='btn join-item' @click="changeDraw(drawType.line)">添加线</button>-->
<!--      <button class='btn join-item' @click="changeDraw(drawType.fill)">添加面</button>-->
    </div>
  </div>
</template>

<style scoped>

</style>
